<template>
	<view class="main">
		<view v-if="userinfo.tbUserInfo.email">
			<view class="box" style="display: flex;align-items: center;">
				<view style="width: 200px;">已绑定邮箱</view>
				<view class="iteam">{{userinfo.tbUserInfo.email}}</view>
			</view>
			<view class="button" @click="changeUserMail">换绑</view>
		</view>
		<view v-else>
			<view class="box">
				<view style="display: flex;align-items: center;">
					<view style="width: 100px;">邮箱地址</view>
					<view class="iteam">
						<input v-model="memail.email" type="text" placeholder="填写邮箱地址" />
					</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view style="width: 100px;">验证码</view>
					<view class="iteam" style="display: flex;justify-content: space-between;">
						<input v-model="memail.code" type="text" placeholder="填写验证码" />
						<view class="codeButton" :disabled="isButtonDisabled" @click="sendMailCode">{{buttonText}}
						</view>
					</view>
				</view>
			</view>
			<view class="button" @click="saveUserMail">保存</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import api from '../../../script/api.js'
	import tools from '../../../script/tools.js'
	import {
		userinfoStore
	} from '../../../store/index.js'
	import {
		storeToRefs
	} from 'pinia'

	const {
		updateUserInfo,
		queryUserInfo
	} = userinfoStore()
	const {
		islogin,
		userinfo,
	} = storeToRefs(userinfoStore())

	const memail = ref({
		email: '',
		code: ''
	})

	const isButtonDisabled = ref(false) // 控制按钮是否可用  
	const buttonText = ref('发送验证码') // 按钮文本  
	const cooldownTime = 60 // 冷却时间（秒）

	const sendMailCode = () => {
		if (isButtonDisabled.value) {
			// 如果按钮正在冷却中，则不执行发送  
			return
		}
		api.post('/tools/sendMailCode', memail.value, (resp) => {
			if (resp.success) {
				uni.showToast({
					title: '验证码发送成功'
				})
				startCooldown()
			} else {
				uni.showToast({
					title: resp.message,
					icon: 'error'
				})
			}
		})
	}
	// 开始倒计时的函数  
	const startCooldown = () => {
		isButtonDisabled.value = true // 禁用按钮  
		let count = cooldownTime
		const countdownInterval = setInterval(() => {
			count--
			buttonText.value = `重新发送(${count}s)` // 更新按钮文本  
			if (count <= 0) {
				clearInterval(countdownInterval) // 清除计时器  
				isButtonDisabled.value = false // 重新启用按钮  
				buttonText.value = '发送验证码' // 重置按钮文本  
			}
		}, 1000)
	}

	const saveUserMail = () => {
		api.patch('/user/email', memail.value, (resp) => {
			if (resp.success) {
				uni.showToast({
					title: '邮箱绑定成功'
				})
			} else {
				uni.showToast({
					title: resp.message,
					icon: 'error'
				})
			}
		})
	}

	const changeUserMail = () => {
		uni.showToast({
			title: '抱歉，暂时不支持换绑哦！',
			icon: 'error'
		})
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 10px;
		min-height: 100vh;
		height: 100%;
		box-sizing: border-box;
		background-color: #f8f8f8;
	}

	.box {
		margin: 10px;
		padding: 10px;
	}

	.iteam {
		width: 100%;
		padding: 10px;
		border-bottom: 0.5px solid #dcdcdc;

		&:hover {
			border-bottom: 0.5px solid #1890ff;
		}
	}

	.codeButton {
		font-size: 20rpx;
		color: #fff;
		background: #1890ff;
		border-radius: 3px;
		padding: 5px;
	}

	.button {
		margin: 30px 10px;
		padding: 15px;
		text-align: center;
		border-radius: 5px;
		color: #fff;
		background-color: #1890ff;
	}
</style>